<template>
    <div class="frame">
        <mu-appbar title="十三水后台管理">
            <mu-icon-button icon="menu"
                            slot="left"
                            @click.native="toggleDrawer()" />
    
            <div slot="right">
                <small style="vertical-align: middle;">{{db_connect_info.ping}}</small>
                <mu-icon style="vertical-align: middle;"
                         :color="db_connect_info.color"
                         value="wifi_tethering"
                         @mouseenter.native="db_connect_info.show_tooltip=true"
                         @mouseleave.native="db_connect_info.show_tooltip=false">
                </mu-icon>
            </div>
            <mu-flat-button :label="loginer.nickname"
                            slot="right" />
            <mu-icon-button icon="expand_more"
                            slot="right" />
        </mu-appbar>
        <mu-drawer :open="is_open_drawer"
                   :docked="false"
                   @close="toggleDrawer()">
            <mu-list>
                <mu-icon-button @click.native="toggleDrawer()"
                                icon="close" />
                <mu-list-item title="会员管理"
                              toggleNested>
                    <mu-icon slot="left"
                             value="supervisor_account" />
                    <mu-list-item slot="nested"
                                  title="会员列表"
                                  @click='routeTo("/admin/member/friendly")'>
                        <mu-icon slot="left"
                                 value="account_circle" />
                    </mu-list-item>
                    <mu-list-item slot="nested"
                                  title="黑名单"
                                  @click='routeTo("/admin/member/blacklist")'>
                        <mu-icon slot="left"
                                 value="account_box" />
                    </mu-list-item>
                    <mu-list-item slot="nested"
                                  title="虚拟会员"
                                  @click='routeTo("/admin/member/faker")'>
                        <mu-icon slot="left"
                                 value="bug_report" />
                    </mu-list-item>
                </mu-list-item>
                <mu-list-item @click='routeTo("/admin/points")'
                              title="水豆管理">
                    <mu-icon slot="left"
                             value="whatshot" />
                </mu-list-item>
                <mu-list-item @click='routeTo("/admin/cards")'
                              title="房卡管理">
                    <mu-icon slot="left"
                             value="credit_card" />
                </mu-list-item>
                <mu-list-item @click='routeTo("/admin/activity")'
                              title="活动管理">
                    <mu-icon slot="left"
                             value="local_activity" />
                </mu-list-item>
                <mu-list-item @click='routeTo("/admin/monitor")'
                              title="游戏监控">
                    <mu-icon slot="left"
                             value="visibility" />
                </mu-list-item>
                <mu-list-item @click='routeTo("/admin/setting")'
                              title="设置">
                    <mu-icon slot="left"
                             value="settings" />
                </mu-list-item>
            </mu-list>
    
        </mu-drawer>
        <div class="main-content"
             :zDepth="2">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import { fetchServer } from "../unit";

const getPingColor = (ping, start_color, end_color, min_ping, max_ping) => {

    let icon_color = start_color;

    // 200毫秒以下为好，3s以上报警
    if (ping <= min_ping) {
        icon_color = start_color;
    } else if (ping >= max_ping) {
        icon_color = end_color;
    } else {
        const dif_ping = max_ping - min_ping;
        const rate = (ping - min_ping) / dif_ping;
        icon_color = start_color.map((base_color, i) => parseInt((end_color[i] - base_color) * rate + base_color))
    }
    return "#" + icon_color.map(color => ('0' + color.toString(16)).substr(-2)).join('');
}

export default {
    data() {
        return {
            is_open_drawer: false,
            loginer: { nickname: "" },
            db_connect_info: {
                color: "#00FF00",
                ping: 0,
                is_connect: false,
                show_tooltip: false,
            }
        }
    },
    async created() {
        this.adminLogin().then(socket_promise_args.resolve);
        socket.on("reconnect", () => {
            this.adminLogin();
        });
        socket.on("firebase-ping-result", db_ping_info => {
            if (db_ping_info.ping <= 3000) {
                this.db_connect_info.color = getPingColor(db_ping_info.ping,
                    [0x00, 0xff, 0x00],
                    [0xff, 0xff, 0x00],
                    200,
                    3000
                );
            } else {
                this.db_connect_info.color = getPingColor(db_ping_info.ping,
                    [0xff, 0xff, 0x00],
                    [0xff, 0x00, 0x00],
                    3000,
                    10000
                );
            }

            this.db_connect_info.ping = db_ping_info.ping;
            this.db_connect_info.is_connect = db_ping_info.is_connect;
        })
    },
    methods: {
        toggleDrawer(is_open_drawer = !this.is_open_drawer) {
            this.is_open_drawer = is_open_drawer;
        },
        routeTo(path) {
            this.$router.push(path);
        },
        async adminLogin() {
            const admin_login_info = await fetch(server_href + "/admin/loginer", {
                credentials: 'include'
            }).then(res => res.json());
            if (admin_login_info.status === "error") {
                this.$router.replace('/login');
                return
            }
            this.loginer = admin_login_info.data.admin;
            Raven.setUserContext(Object.assign({}, this.loginer));// log user
            const admin_io_token = admin_login_info.data.admin_io_token;
            socket.emit("admin-login", { admin_io_token });
            return new Promise(resolve => {
                socket.once("admin-login-result", is_success => {
                    if (is_success) {
                        resolve(socket);
                    } else {
                        // 重新登录到io系统
                        this.adminLogin().then(res_socket => {
                            resolve(res_socket);
                        })
                    }
                });
            });
        }
    },
    watch: {
        "$route"(route) {
            console.log("route", route)
            this.toggleDrawer(false)
        }
    }
}
</script>
<style scoped>
.full-width {
    display: block;
}

.main-content {
    margin: 1em;
}
</style>

<style>
nav .el-submenu__icon-arrow {
    right: 10px;
}
</style>